import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Login.css';
import {loginRequitApi} from '../../../api/account/login/loginApi.ts';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  // 处理登录
  const handleLogin = async (e) => {
    e.preventDefault();
    // 简单验证
    if (!username || !password) {
      setError('请输入用户名和密码');
      return;
    }
    const msg = await loginRequitApi(username, password);
    console.log(msg);
    // 这里应该是实际的登录逻辑
    // 模拟登录成功

    setError('');

    // 登录成功后跳转到首页
    navigate('/home');
  };

  // 跳转到注册页面
  const goToRegister = () => {
    navigate('/register');
  };

  // 跳转到忘记密码页面
  const goToForgotPassword = () => {
    navigate('/forgot-password');
  };

  return (
    <div className="login-container">
      <div className="login-box">
        <h1>短视频平台</h1>
        <p className="subtitle">记录美好生活</p>

        {error && <div className="error-message">{error}</div>}

        <form onSubmit={handleLogin} className="login-form">
          <div className="form-group">
            <label htmlFor="username">用户名</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="请输入用户名"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
              required
            />
          </div>

          <button type="submit" className="login-button">登录</button>
        </form>

        <div className="login-links">
          <p onClick={goToForgotPassword} className="link">忘记密码?</p>
          <p onClick={goToRegister} className="link">还没有账号? 立即注册</p>
        </div>

        <div className="divider">或</div>

        <div className="social-login">
          <button className="social-button wechat">
            <i className="icon wechat-icon"></i> 微信登录
          </button>
          <button className="social-button qq">
            <i className="icon qq-icon"></i> QQ登录
          </button>
          <button className="social-button weibo">
            <i className="icon weibo-icon"></i> 微博登录
          </button>
        </div>
      </div>

      {/* 预留的页面跳转功能 */}
      {/* 这些函数可以在其他组件中调用 */}
      <div className="hidden-navigation">
        <button onClick={() => navigate('/explore')} className="hidden-button">跳转到探索页</button>
        <button onClick={() => navigate('/profile')} className="hidden-button">跳转到个人主页</button>
        <button onClick={() => navigate('/upload')} className="hidden-button">跳转到上传页</button>
        <button onClick={() => navigate('/notifications')} className="hidden-button">跳转到通知页</button>
      </div>
    </div>
  );
};

export default Login;